<template>
  <div>
    <ul class="box" v-for="(item,index) in data" :key="index">
      <li>
        <span class="emphasize">{{item.name}}</span>
        <span class="jump">{{item.number}}</span>
      </li>
      <li>
        <p>我的备注：<span class="emphasize">{{item.remark}}</span></p>
        <p class="right">成员数：<span class="emphasize">{{item.member}}</span></p>
      </li>
      <li>
        <p>发言次数：<span class="emphasize">{{item.speak}}</span></p>
        <p class="right">最后发言时间：<span class="emphasize">{{item.lastTime}}</span></p>
      </li>
      <li v-if="item.caseType && item.caseType.length > 0">
        成员涉案类型：<span class="label" v-for="(itemType,index) in item.caseType" :key="index">{{itemType}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'group-list',
    components: {},
    mixins: [],
    computed: {},
    props: {
      data: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {}
    },
    methods: {},
    watch: {},
    mounted() {
    },
    created() {
    }
  }
</script>

<style scoped lang="scss">
  .box {
    padding: 0.2rem 0 0.9rem 0;
    margin: 0 0.5rem 0 2.2rem;
    border-bottom: 1px solid #f2f2f2;
    &:last-child {
      border-bottom: none;
    }
    li {
      display: -webkit-box;
      line-height: 1.2;
      margin-top: .5rem;
      > p {
        flex-grow: 1;
        margin: 0;
        &.right {
          letter-spacing: -0.02rem;
          text-align: right;
        }
      }
      .label {
        font-size: .5rem;
        background: #ff6600;
        padding: .2rem .5rem;
        color: #fff;
        font-weight: normal;
        border-radius: .6rem;
        margin-right: .1rem;
        display: -webkit-inline-box;
      }
    }
  }
</style>
